import React from 'react'
import { Col, Button, Modal, Icon } from 'antd'
import moment from 'moment'
import PromotionCostForm from './promotionForm'
import DateRangeForm from './dateRangeForm'
import PromotionList from './promotionList'
import { getCategoryList, getProductList } from '../services/restData'
import Filters from './filters'
const dateFormat = 'YYYY-MM-DD'
const today = new Date()
class Index extends React.Component {
  constructor () {
    super()
    this.state = {
      searchParams: {
        startDate: moment(today, dateFormat).subtract(15, 'days'),
        endDate: moment(today, dateFormat),
        sortField: 'date',
        sortType: 'asc',
        channels: [],
        app: null,
        products: []
      },
      categories: [],
      products: [],
      showPromotionForm: false,
      promotionFormTitle: 'Add Promotion Cost',
      promotionFormData: {
        appCode: null,
        date: null,
        cost: null,
        costIn: 'dollar',
        channelId: null,
      },
      formAction: 'add',
      reloadCounter: 0
    }
  }
  async componentDidMount () {
    const categories = await getCategoryList()
    const products = await getProductList()
    this.setState({categories, products})
  }

  dateChangeHandler =  (values) => {
    const searchParams = this.state.searchParams;
    searchParams.startDate = values[0].format(dateFormat);
    searchParams.endDate = values[1].format(dateFormat);
    this.setState({
      searchParams: searchParams
    })
  }
  filterChangeHandler = (filter) => {
    const searchParams = this.state.searchParams;
    searchParams.app = filter.app;
    searchParams.products = filter.products;
    searchParams.channels = filter.channels;
    this.setState({searchParams});
  }
  showPromotionCostModal(showPromotionForm) {
    if (showPromotionForm) {
      this.setState({promotionFormTitle: 'Add Promotion Cost'})
      this.setState({formAction: 'add'})
    }
    this.setState({showPromotionForm})
  }
  updateRecord = (row) => {
    this.setState({promotionFormData: row})
    this.setState({promotionFormTitle: 'Update Record'})
    this.setState({formAction: 'update'})
    this.setState({showPromotionForm: true})
  }
  reload() {
    this.setState({reloadCounter: ++this.state.reloadCounter});
  }
  render () {
    return (
      <div>
        <div>
          <Col span={5} className='mb20'>
            <DateRangeForm startDate={this.state.searchParams.startDate} endDate={this.state.searchParams.endDate} dateFormat={dateFormat} handleChange={this.dateChangeHandler} />
          </Col>
          <Col span={13}>
            <Filters onChange={this.filterChangeHandler}></Filters>
          </Col>
          <Col span={1}>
            <Button onClick={() => this.reload()} type='danger'><Icon type='reload' /></Button>
          </Col>
          <Col span={3}>
            <Button onClick={() => this.showPromotionCostModal(true)} type='danger'>Add Promotion Data</Button>
          </Col>
          {this.state.showPromotionForm ? <Modal footer={false} onOk={() => this.showPromotionCostModal(false)} onCancel={() => this.showPromotionCostModal(false)} visible={true} centered title={this.state.promotionFormTitle} >
            <PromotionCostForm categories={this.state.categories} products={this.state.products} operation={this.state.formAction}  formData={this.state.promotionFormData} hideForm={() => this.showPromotionCostModal(false)} />
          </Modal> : null}
        </div>
        <div>
          <Col span={20}>
            <PromotionList reloadCounter={this.state.reloadCounter} searchParams={this.state.searchParams} updateRow={this.updateRecord} />
          </Col>
        </div>
      </div>


    )
  }
}
export default Index
